<script setup>
import { onMounted } from 'vue'
const props = defineProps({
	// 主标题
	spuEvaluationData: {},
	closeEvaluationAlert: {}
})
onMounted(() => {
	// console.log(props.spuEvaluationData);
})
</script>
<template>
	<div class="evaluationAlert-mainBox" @click.self.stop="closeEvaluationAlert()">
		<div class="evaluationAlert-evaluationBox">
			<div class="evaluationAlert-closeButton" @click="closeEvaluationAlert()">
				<img src="@/assets/images/home-Images/Group 28@2x.png" alt="" />
			</div>
			<div class="evaluationAlert-titleinfo">
				<div class="commentBox-moreComment">
					<div class="comment-title">商品评价/5.0</div>
					<div class="comment-allNumbeer">（{{ spuEvaluationData ? (Array.isArray(spuEvaluationData) ? spuEvaluationData.length : 1) : 0 }}评论）</div>
				</div>
			</div>
			<div class="evaluationAlert-evaluationlist">
				<div class="commentBox-mainComment" v-for="(item, index) in 1" :key="index">
					<div class="commentBox-userInfo">
						<div class="userInfo-image">
							<img :src="spuEvaluationData.userPic" alt="" />
						</div>
						<div class="userInfo-name">{{ spuEvaluationData.userNickName }}</div>
						<div class="userInfo-line"></div>
						<div class="userInfo-commentDate">{{ spuEvaluationData.updateTime }}</div>
					</div>
					<div class="comment-score">
						<div class="score-icon" v-for="(item, index) in 5" :key="index">
							<img src="@/assets/images/detail-images/star@2x.png" alt="" />
						</div>
						<div class="enScore-icon">
							<img src="@/assets/images/detail-images/enstar@2x.png" alt="" />
						</div>
					</div>
					<div class="comment-mainText">
						{{ spuEvaluationData.content }}
					</div>
					<div class="comment-mainimages" v-if="spuEvaluationData.picJson">
						<div class="mainimages-item" v-for="(items, indexs) in spuEvaluationData.picJson" :key="indexs">
							<img :src="items" alt="" />
						</div>
					</div>
				</div>
			</div>
			<div class="homeProduct-pagination">
				<el-pagination :page-size="20" size="large" background layout="prev, pager, next" :total="10" />
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.evaluationAlert-mainBox {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;
	.evaluationAlert-closeButton {
		width: 51px;
		height: 51px;
		position: absolute;
		right: 13px;
		top: 13px;
	}
	.evaluationAlert-evaluationBox {
		position: fixed;
		padding: 25px 26px;
		top: 48px;
		left: 396px;
		right: 396px;
		bottom: 67px;
		background-color: rgba(242, 246, 244, 1);
		border-radius: 32px 32px 32px 32px;
		border: 1px solid #f4f4f4;
		display: flex;
		overflow: hidden;
		flex-direction: column;
		.evaluationAlert-titleinfo {
			width: 100%;
			border-bottom: 1px solid #f4f4f4;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 32px;
			.commentBox-moreComment {
				display: flex;
				.comment-title {
					font-weight: bold;
					font-size: 19px;
					color: #000000;
					margin-right: 19px;
				}
				.comment-allNumbeer {
					font-weight: 400;
					font-size: 19px;
					color: #333333;
				}
			}
		}
		::-webkit-scrollbar {
			display: none;
		}
		.evaluationAlert-evaluationlist {
			width: 100%;
			flex: 1;
			overflow-y: scroll;
			.commentBox-mainComment {
				margin-bottom: 20px;
				border-bottom: 1px solid rgba(244, 244, 244, 1);
				.commentBox-userInfo {
					display: flex;
					align-items: center;
					border-bottom: 1px solid #f4f4f4;
					margin-bottom: 21px;
					.userInfo-image {
						width: 48px;
						height: 48px;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 21px;
					}
					.userInfo-name {
						font-weight: 400;
						font-size: 21px;
						color: #1a1e26;
					}
					.userInfo-line {
						width: 0px;
						height: 21px;
						border: 1px solid #f4f4f4;
						margin: 0 21px;
					}
					.userInfo-commentDate {
						font-weight: 300;
						font-size: 19px;
						color: #9d9ea2;
					}
				}
				.comment-score {
					display: flex;
					margin-bottom: 21px;
					.score-icon {
						width: 21px;
						height: 21px;
						margin-right: 5px;
					}
					.enScore-icon {
						width: 21px;
						height: 21px;
						margin-right: 5px;
					}
				}
				.comment-mainText {
					width: 100%;
					border-radius: 5px 5px 5px 5px;
					border: 1px solid #f4f4f4;
					font-weight: 400;
					font-size: 21px;
					color: #1a1e26;
					margin-bottom: 21px;
					padding: 10px 10px;
				}
				.comment-mainimages {
					display: flex;
					.mainimages-item {
						width: 171px;
						height: 171px;
						border-radius: 7px;
						margin-right: 13px;
						overflow: hidden;
					}
				}
			}
		}
		.homeProduct-pagination {
			display: flex;
			justify-content: end;
			align-items: end;
			border-top: 1px solid #f4f4f4;
			height: 48px;
			justify-content: center;
			--el-color-white: rgba(195, 13, 35, 1);
			--el-pagination-button-height-large: 48px;
			--el-pagination-button-width-large: 48px;
		}
		:deep(.el-pagination) {
			--el-pagination-hover-color: rgba(195, 13, 35, 0.2) !important;
			.is-active {
				background-color: rgba(195, 13, 35, 0.2) !important;
			}
		}
	}
}
</style>